<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title">
					当前区域
				</div>
				<div class="current-area">
					<span class='area-block active'>开封</span>
				</div>
			</div>
			<div class="area">
				<div class="title">
					热门区域
				</div>
				<ul class="hot-area">
					<li class="area-block"
					v-for='item of hotCities'
					:key=item.id
					>{{item.name}}</li>
				</ul>
			</div>
			<div class="area" 
			 v-for='(item,key) of cities'
			  :key=key
			:ref='key'
			  >
				<div class="title">
					{{key}}
				</div>
				<ul class="hot-area">
					<li class="area-block"  v-for = 'itemName of item' :key='itemName.id'>{{itemName.name}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import BScroll from 'better-scroll'
	export default{
		name:'CityList',
		props:{
			cities:{
				type:Object,
				required:true
			},
			hotCities:{
				type:Array,
				required:true
			},
			letter:{
				type:String
			}
		},
		mounted(){
			this.scroll = new BScroll(this.$refs.wrapper)
		},
		watch:{
			letter(){
				if(this.letter){
					const element = this.$refs[this.letter][0]
					console.log(this.$refs)
					this.scroll.scrollToElement(element)
				}
			}
		}
	}
</script>
<style scoped lang="stylus">
@import '~@/assets/styles/global.styl'
	.list{
		position: absolute;
		left: 0;
		top: 1.4rem;
		bottom: 0;
		right: 0;
		background-color: #eee;
		font-size: .36rem;
		overflow-y: hidden;
	}
	.title{
		line-height: .44rem;
		padding-left: .2rem;
		font-size: .26rem;
		color: #666;
	}
	.current-area{
		height: 1rem;
		font-size: .28rem;
		background-color: #fff
	}
	.area-block{
		display: inline-block;
		height: .6rem;
		width: 2rem;
		margin-top: .2rem;
		margin-left: .2rem;
		text-align: center;
		line-height: .6rem;
		border: 1px solid #666;
		border-radius:.1rem;
		color: #666;
	}	
	.area-block.active{
		border: 1px solid $bgColor
		color:$bgColor;
	}
	.hot-area{
		padding-bottom: .2rem;

		background-color: #fff;
	}
</style>